<template>
  <div class="login-container">
    <div class="login-card">
      <div class="login-header">
        <img src="@/assets/icons/logo.svg" alt="Logo" class="logo" />
        <h1>欢迎回来</h1>
        <p>请输入账号信息进行登录</p>
      </div>
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
        <el-form-item>
          <el-input v-model="loginForm.username" placeholder="请输入账号">
            <template #prefix>
              <el-icon>
                <User />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginForm.password" type="password" placeholder="请输入登录密码" show-password>
            <template #prefix>
              <el-icon>
                <Lock />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-button round size="large" type="primary" :loading="loading" @click="login(loginFormRef)">登 录 </el-button>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus";
import { User, Lock, UserFilled } from "@element-plus/icons-vue";

import { onBeforeUnmount, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { HOME_URL } from "@/config";
import { Login } from "@/api/interface";

import { loginApi } from "@/api/modules/login";
import { useTabsStore } from "@/stores/modules/tabs";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
import type { ElForm } from "element-plus";
import md5 from "md5";

const router = useRouter();
const tabsStore = useTabsStore();
const keepAliveStore = useKeepAliveStore();

type FormInstance = InstanceType<typeof ElForm>;
const loginFormRef = ref<FormInstance>();
const loginRules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }]
});

const loading = ref(false);
const loginForm = reactive<Login.ReqLoginForm>({
  username: "admin",
  password: "12345678"
});

// login
const login = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async valid => {
    if (!valid) return;
    loading.value = true;
    try {
      // 1.执行登录接口
      const { isSuccess } = await loginApi({ ...loginForm, password: md5(loginForm.password) });
      if (!isSuccess) return;
      ElMessage.success("登录成功");

      // 2.添加动态路由
      await initDynamicRouter();

      // 3.清空 tabs、keepAlive 数据
      await tabsStore.setTabs([]);
      await keepAliveStore.setKeepAliveName([]);

      // 4.跳转到首页
      await router.push({ path: HOME_URL });
    } finally {
      loading.value = false;
    }
  });
};

onMounted(() => {
  // 监听 enter 事件（调用登录）
  document.onkeydown = (e: KeyboardEvent) => {
    if (e.code === "Enter" || e.code === "enter" || e.code === "NumpadEnter") {
      if (loading.value) return;
      login(loginFormRef.value);
    }
  };
});

onBeforeUnmount(() => {
  document.onkeydown = null;
});
</script>
<style lang="scss" scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 520px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.login-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 2.5rem;
}

.logo {
  width: 80px;
  height: 80px;
  margin-bottom: 1.5rem;
}

h1 {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
}

:deep(.el-form-item) {
  margin-bottom: 1.5rem;
}

:deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
  transition: all 0.3s ease;
  height: 44px;
  border-radius: 44px;
}

:deep(.el-input__wrapper:hover),
:deep(.el-input__wrapper.is-focus) {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}

:deep(.el-input__inner) {
  color: #fff;
  font-size: 1rem;
  height: 100%;
}

:deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

:deep(.el-input__prefix) {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

:deep(.el-button) {
  width: 100%;
  height: 44px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 44px;
  background: #4968eb;
  border-color: #667eea;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
}

:deep(.el-button:hover) {
  background: #5a67d8;
  border-color: #5a67d8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(90, 103, 216, 0.4);
}

:deep(.el-button:active) {
  transform: translateY(0);
  box-shadow: none;
}
</style>
